import styles from './index.module.less'
import logo from '../../assets/keji.png'
import shouchang from '../../assets/shouchang.png'
import xiaoxi from '../../assets/xiaoxi.png'
import wode from '../../assets/wode.png'
import shouye from '../../assets/shouye.png'
import dog from '../../assets/dog.png'
import cat from '../../assets/cat.png'
import { Button } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { useEffect } from 'react'
import axios from '../../api'
export default function PetClass() {
const navigate = useNavigate()
const goPetList=(category)=>{
  navigate(`/petList/${category}`)
}
const goPublish=()=>{
  navigate('/publish')
}
const goMessage=()=>{
  navigate('/message')
}
 
  return (
    <div className={styles.petclass}>
      <div className={styles.header}>
        <div className={styles.img}>
          <img src={logo} alt="" />
        </div>
        <Button type='primary' className={styles.release} onClick={()=>goPublish()}>发布</Button>

      </div>
      <div className={styles.content}>
        <div className={styles.title}>
          <Button type='primary' className={styles.titlebtn}>全部</Button>
          <Button type='primary' className={styles.titlebtn}>寻找主人</Button>
          <Button type='primary' className={styles.titlebtn}>等待领养</Button>
          <Button type='primary' className={styles.titlebtn}>紧急救助</Button>
        </div>
        <div className={styles.Content_details}>
          <div className={styles.card} onClick={()=>goPetList('dog')}>
            <div className={styles.card_img}>
              <img src={dog} alt="" />
            </div>
            <div className={styles.card_title}>
              <div>金毛</div>
              <div>12岁</div>

            </div>

          </div>
          <div className={styles.card} onClick={()=>goPetList('cat')}>


            <div className={styles.card_img}>
              <img src={cat} alt="" />
            </div>
            <div className={styles.card_title}>
              <div>小猫</div>
              <div>1岁</div>

            </div>
          </div>
        </div>

      </div>


      <div className={styles.Navigation}>
        <div className={styles.item}>

          <img src={shouye} width={20} alt="" />
          <div>首页</div>
        </div>
        <div className={styles.item}>

          <img src={xiaoxi} width={20} alt="" />
          <div onClick={()=>goMessage()}>消息</div>
        </div>
        <div className={styles.item}>
          <img src={shouchang} width={20} alt="" />
          <div>收藏</div>
        </div>
        <div className={styles.item}>
          <img src={wode} width={20} alt="" />
          <div>我的</div>
        </div>


      </div>

    </div>

  )
}
